<template>
    <van-tabbar v-model="state.active" :fixed="state.ishow" :safe-area-inset-bottom="state.ishow" :border="state.ishow"
        active-color="#ee0a24" @change="changeRouter">
        <van-tabbar-item v-for="(item, index) in state.tabbars" :to="item.path" :key="index" :name="item.name">
            <span> {{ item.label }}</span>
            <template #icon="props">
                <img :src="props.active ? item.active : item.inactive" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { computed, onMounted, reactive, } from 'vue';
import { useRoute, useRouter } from 'vue-router'
const state = reactive({
    active: '',
    ishow: true,
    tabbars: [
        {
            label: "团购",
            path: '/',
            name: 'Home',
            key: 'grey_01',
            active: '/src/assets/Image/Tabbar/red_01.png',
            inactive: '/src/assets/Image/Tabbar/grey_01.png',

        },
        {
            label: "预售",
            path: '/Presale',
            name: 'Presale',
            key: 'grey_02',
            active: '/src/assets/Image/Tabbar/red_02.png',
            inactive: '/src/assets/Image/Tabbar/grey_02.png',
        },
        {
            label: "购物车",
            path: '/Cart',
            name: 'Cart',
            key: 'grey_03',
            active: '/src/assets/Image/Tabbar/red_03.png',
            inactive: '/src/assets/Image/Tabbar/grey_03.png',
        },
        {
            label: "提货",
            path: '/Pickup',
            name: 'Pickup',
            key: 'grey_04',
            active: '/src/assets/Image/Tabbar/red_04.png',
            inactive: '/src/assets/Image/Tabbar/grey_04.png',
        },
        {
            label: "我的",
            path: '/User',
            name: 'User',
            key: 'grey_05_actie',
            active: '/src/assets/Image/Tabbar/red_05.png',
            inactive: '/src/assets/Image/Tabbar/grey_05.png',
        }
    ]
})


// 假设这段代码运行在一个Vue组件中，state是组件的状态管理对象
// let multipleImport = async () => {
//     try {
//         const files = await import.meta.glob('@image/Tabbar/*.png', { eager: true });
//         const tabbarsByKey = {};
//         state.tabbars.forEach(item => { // 构建一个以key为键的映射对象，以提高查找效率
//             tabbarsByKey[item.key] = item;
//         });

//         // 遍历文件，更新对应tabbar项
//         Object.keys(files).forEach((fileName) => {
//             const fileType = fileName.match(/([^/]*?)\.[^/.]+$/)[1]; // 提取文件名
//             if (tabbarsByKey[fileType]) {// 如果存在对应key的tabbar项，则更新inactive属性
//                 tabbarsByKey[fileType].inactive = files[fileName].default;
//                 console.log(files)
//             } else { // 否则记录日志，处理或忽略不匹配的情况
//                 console.warn(`No matching tabbar item found for file type: ${fileType}`);
//             }
//         });
//     } catch (error) {// 错误处理：打印错误日志，考虑是否需要进一步处理错误（如用户提示）
//         console.error(`Error importing files: ${error}`);
//     }
// }
// multipleImport()
const route = useRoute();
onMounted(() => {
    state.active = route.name
})

const router = useRouter()
const changeRouter = (val) => {
    let path = val == 'Home' ? '/' : `/${val}`
    router.push(path)
}

</script>

<style lang="scss" scoped></style>